<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 16:52:53
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-11-11 16:29:47
 * @Description: 
 -->
<template>
  <div class="grimm-menu">
    <grimm-popup
      type="grimm-menu-popup"
      v-model="menuState"
      :position="position"
      :mask-closable="true"
      ref="popup"
    ></grimm-popup>
    <div
      class="grimm-menu-container"
      :class="{
        'grimm-menu-container-active': menuState
      }"
      :style="{width: options.width}"
    >
      <div class="grimm-menu-item" v-for="(item, index) in options.list" :key="index">
        <div
          class="grimm-menu-item-lv1"
          :class="{
            'grimm-menu-item-active': currentPath === item.path
          }"
          @click="handleClickMenu(item)"
        >
          <span>{{item.name}}</span>
          <i class="iconfont arrow-right" v-if="!item.children" style="font-size: 12px;"></i>
        </div>

        <div
          class="grimm-menu-item-lv2"
          :class="{
              'grimm-menu-item-active': currentPath === item.path
            }"
          v-for="(_item, _index) in item.children"
          :key="_index"
          @click="handleClickMenu(_item)"
        >
          <span>{{_item.name}}</span>
          <i class="iconfont arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GrimmPopup from '../Popup';
let [currentPath] = location.href.match(/\/([^?#]+)$/i) || [];
export default {
  name: 'grimm-menu',
  components: {
    GrimmPopup,
  },
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          list: [],
          width: '50%',
        };
      },
    },
  },
  data() {
    return {
      position: 'left',
      menuState: false,
      currentPath,
    };
  },
  mounted() {},
  methods: {
    show() {
      this.$refs.popup.show();
    },
    handleClickMenu(item) {
      this.$refs.popup.hide();
      currentPath !== item.path && this.$router.push({ name: item.name });
    },
  },
};
</script>
<style lang="stylus"  scoped>
.grimm-menu-container {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  overflow: auto;
  color: #fff;
  background: #8b8bb2;
  font-size: 14px;
  transform: translate3d(-100%, 0, 0);
  transition: all 0.5s ease;
}

.grimm-menu-container-active {
  transform: translate3d(0, 0, 0);
  transition: all 0.5s ease;
}

.grimm-menu-item-lv1, .grimm-menu-item-lv2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
}

.grimm-menu-item-active {
  color: #5eaa00;
}
</style>